<template>
    <div class="Box" style="position: relative; margin: 0 auto;" @mousemove="draggableFunMove"
        @mouseup="draggableFunUp">
        <div class="content" ref="content">
            <div>
                <el-descriptions title="客户信息" border>
                    <el-descriptions-item label="车牌号">{{ tableData?.licensePlate }}</el-descriptions-item>
                    <el-descriptions-item label="车牌颜色">
                        {{colorTypeList.find(item => item.value == tableData?.licensePlateColor)?.label}}
                    </el-descriptions-item>
                    <el-descriptions-item label="车架号(VIN)">{{ tableData?.bodyNo }}</el-descriptions-item>
                    <el-descriptions-item label="发动机型号">{{ tableData?.engineNo }}</el-descriptions-item>
                    <el-descriptions-item label="车辆品牌">{{ tableData?.carBrand }}</el-descriptions-item>
                    <el-descriptions-item label="出厂里程标识值">{{ tableData?.mileageNum }}</el-descriptions-item>
                    <el-descriptions-item label="接车日期">{{ tableData?.acceptDate }}</el-descriptions-item>
                    <el-descriptions-item label="进厂日期">{{ tableData?.repairDate }}</el-descriptions-item>
                    <el-descriptions-item label="结算日期">{{ tableData?.settleDate }}</el-descriptions-item>
                    <el-descriptions-item label="燃料(能源)类型">
                        {{energyTypeList.find(item => item.value == tableData?.energyType)?.label}}
                    </el-descriptions-item>
                    <el-descriptions-item label="故障描述">{{ tableData?.errorDesc }}</el-descriptions-item>
                    <el-descriptions-item label="质量保证期(里程)">
                        {{ tableData?.qualityAssuranceMileage }}
                    </el-descriptions-item>
                    <el-descriptions-item label="质量保证期(天数)">{{ tableData?.qualityAssuranceDays }}</el-descriptions-item>
                    <el-descriptions-item label="托修方">
                        {{repairPrescriptionList.find(item => item.value == tableData?.companyId)?.label}}
                    </el-descriptions-item>
                    <el-descriptions-item label="质量检验员">
                        {{qualityInspectorList.find(item => item.value == tableData?.qualityInspectorId)?.label}}
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <div>
                <el-descriptions title="现场作业照片(前后左右)" column="4">
                    <el-descriptions-item :rowspan="2" :width="140" align="center">
                        <el-image style="width: 100px; height: 100px" :src="tableData?.carImgFront1" :fit="fit" />
                    </el-descriptions-item>
                    <el-descriptions-item :rowspan="2" :width="140" align="center">
                        <el-image style="width: 100px; height: 100px" :src="tableData?.carImgBack1" :fit="fit" />
                    </el-descriptions-item>
                    <el-descriptions-item :rowspan="2" :width="140" align="center">
                        <el-image style="width: 100px; height: 100px" :src="tableData?.carImgLeft1" :fit="fit" />
                    </el-descriptions-item>
                    <el-descriptions-item :rowspan="2" :width="140" align="center">
                        <el-image style="width: 100px; height: 100px" :src="tableData?.carImgRight1" :fit="fit" />
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <div class="notLabel">
                <el-descriptions title="服务项目" direction="vertical" :column="1">
                    <el-descriptions-item v-for="item in tableData?.projectList" :key="item.projectName">
                        <el-card class="mb-2">
                            <template #header>
                                <div class="flex justify-between items-center">
                                    <div>
                                        <span class="font-bold text-base">{{ item.projectName }}</span>
                                        <span class="ml-4">项目工时：<span>{{ item.duration }}</span>
                                        </span>
                                    </div>
                                </div>
                            </template>
                            <el-table :data="item.productList">
                                <el-table-column label="配件名称" prop="productName"> </el-table-column>
                                <el-table-column prop="productCode" label="配件编号" />
                                <el-table-column prop="num" label="配件数量" />
                            </el-table>
                        </el-card>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </div>
        <div class="rightTab">
            <div class="rightTabItem" v-for="item in gongzhangList">
                <div :style="{ top: item.style.top + 'px', left: item.style.left + 'px' }"
                    @mousedown="draggableFunDown($event, item)">
                    <img :src="item.value" draggable="false" />
                </div>
            </div>
        </div>
    </div>
    <div class="footButton">
        <el-button type="primary" @click="gotoPrint">完成盖章/开始打印</el-button>
    </div>

</template>

<script setup>
import {
    getEnterpriseListApi,
    getQualityCheckerListApi
} from "@/api/second";
import { defineProps, ref, toRefs, onMounted } from 'vue'
import printJS from 'print-js'
import html2Canvas from 'html2canvas'
import jsPDF from 'jspdf'
import { energyTypeList, colorTypeList } from "@/enum/index";
import yinzhan from '@/assets/image/seal.png'

const props = defineProps({
    data: Object,
})
const tableData = toRefs(props).data

const repairPrescriptionList = ref(new Array())
const qualityInspectorList = ref(new Array())
onMounted(async () => {
    const res1 = await getEnterpriseListApi(void 0)
    repairPrescriptionList.value = res1.map(item => {
        return {
            label: item.companyName,
            value: item.id
        }
    })
    const res2 = await getQualityCheckerListApi({
        position: "2"
    })
    qualityInspectorList.value = res2.map(item => {
        return {
            label: item.name,
            value: item.id
        }
    })
})

let gongzhangList = ref([{
    value: yinzhan,
    style: {
        top: 0,
        left: 0
    }
}])
let mouseData = ref({
    value: void 0,
    clientX: void 0,
    clientY: void 0
})
const draggableFunDown = (e, value) => {
    mouseData.value.value = value
    mouseData.value.clientX = e.clientX
    mouseData.value.clientY = e.clientY
}
const draggableFunMove = e => {
    if (mouseData.value.value) {
        mouseData.value.value.style.top += (e.clientY - mouseData.value.clientY)
        mouseData.value.clientY = e.clientY
        mouseData.value.value.style.left += (e.clientX - mouseData.value.clientX)
        mouseData.value.clientX = e.clientX
    }
}
const draggableFunUp = () => {
    mouseData.value.value = void 0
}

const content = ref(null)
let pdfData = ref(new String())
const gotoPrint = async () => {
    ElMessage('打印内容生成中...')
    const canvas = await html2Canvas(content.value, {
        allowTaint: false,
        height: content.value.scrollHeight + 2,
        width: content.value.scrollWidth + 2,
        windowWidth: content.value.scrollWidth,
        windowHeight: content.value.scrollHeight,
        logging: false,
        useCORS: true,
        scale: 4
    })
    const pdf = new jsPDF()
    const ctx = canvas.getContext('2d')
    //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
    const a4w = 190, a4h = 277
    const imgHeight = Math.floor(a4h * canvas.width / a4w)
    let renderedHeight = 0
    while (renderedHeight < canvas.height) {
        let page = document.createElement("canvas")
        page.width = canvas.width;
        //可能内容不足一页
        page.height = Math.min(imgHeight, canvas.height - renderedHeight)
        //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
        if (ctx != null) {
            page.getContext('2d')?.putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
        }
        //添加图像到页面，保留10mm边距
        pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width))
        renderedHeight += imgHeight
        if (renderedHeight < canvas.height) {
            //如果后面还有内容，添加一个空页
            pdf.addPage()
        }
    }
    const inch = document.createElement("div")
    inch.style.width = "1in"
    document.body.appendChild(inch)
    //分辨率
    const dpi = inch.offsetWidth
    document.body.removeChild(inch)
    const contentWidth = content.value.offsetWidth
    console.log(dpi)
    gongzhangList.value.forEach(item => {
        pdf.addImage(
            item.value,
            'PNG',
            ((item.style.left + 50 + contentWidth) / dpi * 18.25) + 10,
            (item.style.top / dpi * 18.25) + 10,
            120 / dpi * 18.25,
            120 / dpi * 18.25
        )
    })
    pdfData.value = URL.createObjectURL(pdf.output('blob'))
    printJS(pdfData.value)
}
</script>

<style scoped>
.Box {
    display: flex;
    justify-content: center;
}

.content {
    width: 1000px;
    padding: 30px;
    border: 1px solid #4187f2;
}

.content>div {
    margin-top: 20px;
}

.content>div:first-child {
    margin-top: 0px;
}

.rightTab {
    width: 200px;
    height: 100%;
    margin-left: 50px;
    display: flex;
    flex-direction: column;
}

.rightTab .rightTabItem {
    width: 120px;
    height: 120px;
    position: relative;
}

.rightTab .rightTabItem>div {
    position: absolute;
    width: 120px;
    height: 120px;
    z-index: 1;
}

.rightTab img {
    width: 120px;
    object-fit: contain;
}

.footButton {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}

.notLabel:deep(.el-descriptions__label) {
    display: none;
}
</style>